﻿<html>
<head>
<meta charset="utf-8">
<title>帮助中心</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="js/fontSize.js"></script>
<script src="js/vue.min.js"></script>
</head>
<body>

<div class="page" id="app">

  <div class="help-list" v-if='!mainFlag'>
    <div class="list">
      <span :class='item.id==curList ? "cur" : ""' v-for='(item, index) in listArr' v-text='item.name' @click='getList(index)'></span>
    </div>
    <div class="list-box">
      <span :class='item.id==curId ? "cur" : ""' v-for='(item, index) in dataArr' v-text='item.title' @click='showMain(item.id)'></span>
    </div>
  </div>
  <div class="help-main" v-if='mainFlag'>
    <h3>已确认收货的订单是失效了？</h3>
    <div class="content">有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？</div>
  </div>

</div>

<script src="js/axios.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    type: 1,
    curList: 1,
    curId: 11,
    listArr: [
      {id:1, name: '分类1'},
      {id:2, name: '分类2'}
    ],
    dataArr: [
      {id: 11, title: '已确认收货的订单是失效了？', content: '有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？'},
      {id: 12, title: '有订单笔数却没有佣金显示？', content: '有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？'},
      {id: 13, title: '有订单笔数却没有佣金显示？', content: '有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？'},
      {id: 14, title: '有订单笔数却没有佣金显示？', content: '有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？'},
      {id: 15, title: '有订单笔数却没有佣金显示？', content: '有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？有订单笔数却没有佣金显示？'}
    ],
    mainFlag: false,
    mainTit: '',
    mainCon: ''
  },
  methods: {
    goBack:function(){
      if(this.mainFlag){
        this.mainFlag = false
      }
      else{
        //调用原生方法返回
      }
    },
    share:function(){
      var url = window.location.href;
      url = url + '?id='+this.curId;
      //得到分享的url
    },
    showMain:function(id){
      var newArr = this.dataArr;
      for(var i=0,len=newArr.length;i<len;i++){
        if(newArr[i].id == id){
          this.mainTit = newArr[i].title;
          this.mainCon = newArr[i].content;
        }
      }
      this.mainFlag = true;
    },
    getList:function(index){
      this.curList = this.listArr[index].id;
      // axios.get(api + "/front/kline/month", {
      //   params: {
      //     pageNum: 1
      //   }
      // })
      // .then(function (res) {
      //   if(res.data.code == 0){
      //     console.log(res.data)
      //   }
      // })
      // .catch(function (error) {
      //   console.log(error);
      // });
    }
  },
  created:function(){
    var self = this;
    self.getList(0);
    var url = window.location.href;
    var id = url.split("id=")[1];
    if(id){
      this.showMain(id)
    }
  },
  mounted:function(){

  }
})
</script>

</body>
</html>